<template>
	<div class="header clearfix">
		<div class="header-left">
			<span class="iconfont">&#xe624;</span>
		</div>
		<div class="header-input clearfix">
			<router-link to="/city" class="input-wrap" tag="div">
				<span class="iconfont">&#xe632;</span>
				<input type="text" placeholder="请输入城市/景点/游玩主题">
			</router-link>
		</div>
		<router-link to="/city" tag="div">
			<div class="header-right">
				{{this.city}}
			</div>
		</router-link>
	</div>
</template>

<script>
import { mapState } from 'vuex'
export default{
	name:'HomeHeader',
	computed:{
		...mapState(['city'])
	}
}
</script>

<style lang="scss" scoped>
	.header{
		display:flex;
		line-height:.86rem;
		background: $bgColor;
		color:#fff;
		.header-left{
			width:.64rem;
			float:left;
			text-align:center;
			span{
				display:block;
				font-size:.4rem;
			}
		}
		.header-input{
			flex:1;
			display:flex;
			height:.64rem;
			line-height:.64rem;
			margin-top:.12rem;
			margin-left:.2rem;
			background-color: #fff;
			border-radius:.1rem;
			color:#ccc;
			.input-wrap{
				width: 100%;
				span{
				display:block;
				float:left;
				margin-left:.2rem;
			}
				input{
					display:block;
					float:left;
					margin-left:.1rem;
					flex:1;
					line-height:.64rem;
					color:#000;
					border-radius:.1rem;
				}
			}
		}
		.header-right{
			min-width:1.04rem;
			max-width:2.5rem;
			padding:0 .1rem;
			float:right;
			position:relative;
			text-align:center;
			@include ellipsis;
			&:after{
				display:inline-block;
				content:"";
				width: 0;
				height: 0;
				border:rgba(0,0,0,0) solid .1rem;
				border-top:#fff solid .1rem;
				margin-top:.32rem;
				vertical-align: sub;
			}
		}
	}
</style>